<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/youyi.css"/>
	<link rel="stylesheet" type="text/css" href="../css/environmental.css"/>
    <title>留言咨询</title>   
    <style type="text/css">
    	body{background-color: #fff;}
    	.mui-scroll-wrapper{top: 44px;}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav top_nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left detail_left"></a>
		<h1 id="title" class="mui-title">顾问咨询</h1>
		<!--<a id="info" class="mui-icon iconfont icon-caidan mui-pull-right"></a>-->
	</header>
	<div class="mui-content">
			<div class="mui-scroll-wrapper">
			    <div class="mui-scroll">
			        <div class="item_box consultant_form">
						<div class="item_list_box">
							<div class="">
								<div class="form_item theme_val">
									<label for=""><b>主 &nbsp; &nbsp;题<i>* &nbsp;</i></b><input type="text" placeholder="章子怡" /></label>						
								</div>
								<div class="form_item class_val">
									<label for=""><b>分 &nbsp; &nbsp;类<i>* &nbsp;</i></b>
										<div class="select_class_box">
											<p class="select_input" >请选择分类</p>
											<ul class="class_select">
												<li><a href="javascrpt:;">默认分类</a></li>
												<li><a href="javascrpt:;">环评编写</a></li>
												<li><a href="javascrpt:;">环保工程</a></li>
												<li><a href="javascrpt:;">项目验收</a></li>
												<li><a href="javascrpt:;">环境监测</a></li>
												<li><a href="javascrpt:;">危废服务</a></li>
												<li><a href="javascrpt:;">应急预案</a></li>
												<li><a href="javascrpt:;">清洁生产</a></li>
												<li><a href="javascrpt:;">节能改造</a></li>
												<li><a href="javascrpt:;">其他需求</a></li>
											</ul>
										</div>
									</label>						
								</div>
								<div class="form_item contain_val">
									<label for=""><b>内 &nbsp; &nbsp;容<i>* &nbsp;</i></b><textarea class="" placeholder="请描述你咨询内容"></textarea></label>						
								</div>
								<div class="form_item contact_val">
									<label for=""><b>联系人<i>* &nbsp;</i></b><input type="text" placeholder="章子怡" /></label>						
								</div>
								<div class="form_item phone_val">
									<label for=""><b>联系电话<i>* &nbsp;</i></b><input type="text" placeholder="" /></label>						
								</div>
								<div class="form_item email_val">
									<label for=""><b>电子邮箱</b><input type="text" placeholder="" /></label>						
								</div>
								<div class="form_item qq_val">
									<label for=""><b>QQ</b><input type="text" placeholder="" /></label>						
								</div>
								<div class="form_item you_yzm">
									<label for=""><b>验证码<i>* &nbsp;</i></b><input type="text" placeholder="验证码" class="yzm" /> <span class="send_yzm">发送验证码</span></label>						
								</div>
							</div>
							<div class="form_bar_btn">
								<a href="javascript:;" class="mui-btn mui-btn-block mui-btn-green">提交</a>
							</div>
						</div>
					</div>
			    </div>
			</div>			
	</div>
<script src="../js/mui.min.js"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq=$.noConflict();
mui.init();
(function($) {
	//阻尼系数
	var deceleration = mui.os.ios?0.003:0.0009;
	$('.mui-scroll-wrapper').scroll({
	bounce: false,
	indicators: true, //是否显示滚动条
		deceleration:deceleration
	});
	
	//提交
	document.querySelector(".form_bar_btn a").addEventListener("tap",function(e){
		sureSubmit(e);
	});
})(mui);

mui(".select_class_box").on("tap",".select_input",function(){
	jq(this).toggleClass("active");
	if(jq(this).hasClass("active")){
		jq(this).siblings("ul").slideDown(200);
	}else{
		jq(this).siblings("ul").slideUp(200);
	};
	
});
mui(".class_select").on("tap","li",function(e){
	var theText=jq(this).find("a").text();
	jq(this).parent().slideUp(200);
	jq(".select_input").text(theText).removeClass("active");
	
	
});

//验证手机号
var checkPhone=function (phone) {
return (/^1\d{10}$/.test(phone));
};

//确认申请
var sureSubmit=function(e){
	var appJson={};
	var theme_val=jq.trim(jq(".theme_val input").val());
	var class_val=jq.trim(jq(".class_val input").val());
	var contain_val=jq.trim(jq(".contain_val textarea").val());	
	var contact_val=jq.trim(jq(".contact_val input").val());
	var phone_val=jq.trim(jq(".phone_val input").val());
	var email_val=jq.trim(jq(".email_val input").val());
	var qq_val=jq.trim(jq(".qq_val input").val());
	var you_yzm=jq.trim(jq(".you_yzm input").val());
//	
//	console.log(theme_val);
//	console.log(class_val);
//	console.log(contain_val);
//	console.log(contact_val);
//	console.log(phone_val);
//	console.log(email_val);
//	console.log(qq_val);
//	console.log(you_yzm);	
	if(theme_val!="" && class_val!="" &&contain_val!="" && contact_val!="" && phone_val!="" && you_yzm!=""){		
		if(!checkPhone(phone_val)){
			mui.toast("手机号不正确！");
			return false;
		};
		appJson.theme_val=theme_val;
		appJson.class_val=class_val;
		appJson.contain_val=contain_val;
		appJson.contact_val=contact_val;
		appJson.phone_val=phone_val;
		appJson.you_phone=you_phone;
		appJson.email_val=email_val;
		appJson.qq_val=qq_val;
		appJson.you_yzm=you_yzm;
		console.log(JSON.stringify(appJson));
	}else{
		e.preventDefault();
		mui.toast("内容填写不全！");
	};
	
};
//验证码发送时间
time.wait = 10;
function time(waitTime) {
	var _this=this;
	if (time.wait == 0) {
		mui(_this).off("tap").on("tap","span",function() {
			time.call(_this,waitTime);
		});
		jq("span",_this).removeClass("active").text("重新获取");
		time.wait = waitTime;
	} else {
		mui(_this).off("tap");
		jq("span",_this).addClass("active");
		jq("span",_this).text("重新获取(" + time.wait-- + ")");
		setTimeout(function() {
			time.call(_this,waitTime);
		}, 1000);
	}
};
mui('.you_yzm').on('tap',".send_yzm",function () {
        time.call(document.querySelector('.you_yzm'),time.wait);
});
</script>
</body>
</html>